<template>
  <!--设置开发周期-->
  <el-dialog
    :close-on-click-modal="false"
    title="设置开发周期"
    :beforeClose="handleClose"
    :visible.sync="dialogVisible"
    width="700px">
    <el-form :model="form" ref="form" size="small" :rules="rules" label-width="0">
      <table class="progress-table" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <Td class="table-title">阶段</Td>
          <Td class="table-title" style="width:150px">建议开发完成时间</Td>
          <Td class="table-title" style="width:150px">预计开发完成时间</Td>
          <Td class="table-title" style="width:150px">实际开发完成时间</Td>
          <Td class="table-title" style="width:100px">状态</Td>
        </tr>
        <tr v-for="(item,index) in form.stepList" :key="index">
          <Td>{{ item.itemTitle }}</Td>
          <Td>
             <el-form-item>
                 {{item.itemValue1}}
             </el-form-item>
          </Td>
          <Td>
            <el-form-item :prop="`stepList.${index}.itemValue2`" :rules="rules.itemValue2" >
              <el-date-picker
                style="width:150px"
                value-format="yyyy-MM-dd"
                v-model="item.itemValue2"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </Td>
          <Td>
            <el-form-item>
               {{item.itemValue3}}
            </el-form-item>
          </Td>
          <Td>
            {{item.state == 1 ? '已完成' : '未完成'}}
          </Td>
        </tr>
      </table>
    </el-form>

    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>

import {customerNewCycleSet,developCycleInfo} from '@/api/company'
import {validatePhone} from '@/utils/validate';
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'



const defaultForm = {
  cglId:'',
  goodsLineName:'',
  developState:'',
  stepList:[]
};
export default {
  name: "index",
  data(){
    return {
      dialogVisible:false,
      btnLoading:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      rules:{
        itemValue2:[{required: true, message: '此项必填', trigger: 'change'},],
      },

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{

    //显示设置开发周期
    showPop(item){
      this.dialogVisible = true;
      developCycleInfo({cglId:item.cglId}).then((res)=>{
        this.form = JSON.parse(JSON.stringify(res))
      })
    },

    //关闭设置开发周期
    handleClose(){
      this.$refs.form.clearValidate();
      this.dialogVisible = false;
      this.btnLoading = false;
    },

    //提交设置开发周期
    handleConfirm(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = {};
          data.cglId = this.form.cglId;
          data.stepList = [];
          this.form.stepList.forEach((el)=>{
             data.stepList.push({
               itemCode:el.itemCode,
               itemValue1:el.itemValue1,
               itemValue2:el.itemValue2,
               itemValue3:el.itemValue3
             })
          })
          customerNewCycleSet(data).then((res)=>{
            this.btnLoading = false;
            this.handleClose();
            this.$emit("getSteps")
          }).catch(()=>{
            this.btnLoading = false;
          })
        }
      })
    },
  },
}
</script>

<style  lang="scss">
    .progress-table{
      width:100%;
      border-left:1px solid #DCDFE6;
      border-bottom:1px solid #DCDFE6;
      font-size:12px;
      td{
        border-right:1px solid #DCDFE6;
        border-top:1px solid #DCDFE6;
        padding:10px 10px ;
        text-align: center;
      }
      .table-title{
        background: #f5f7fa;
        text-align: center;
      }
    }
</style>
